<template>
  <div class="movie_menu">
    <div class="hot_swtich">
      <nut-row>
        <nut-col :span="12">
          <div class="flex-content">
            <router-link to="/movie/nowPlaying" class="hot_item active">正在热映</router-link>
          </div>
        </nut-col>
        <nut-col :span="12">
          <div class="flex-content flex-content-light">
            <router-link to="/movie/comingSoon" class="hot_item">即将上映</router-link>
          </div>
        </nut-col>
      </nut-row>

    </div>
  </div>

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"/>
    </keep-alive>
  </router-view>


</template>

<script>
// import HeaderPlus from '../../components/Header/HeaderPlus'
// import TabBar from '../../components/TabBar'
// import NowPlaying from '../../components/NowPlaying'
// import ComingSoon from '../../components/ComingSoon'

import {reactive, toRefs} from 'vue'

export default {
  name: "Movie",
  props: {},
  setup() {
    const state = reactive({
      tab1value: '0',
    });
    return {
      state,
      ...toRefs(state),
    };
  },
  components: {
    // HeaderPlus,
    // TabBar
    // NowPlaying,
  }
}
</script>

<style scoped>
.flex-content{
  text-align: center;
}

.movie_menu {
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  z-index: 10;
}


.movie_menu .hot_swtich {
  display: flex;
  height: 100%;
  line-height: 45px;
  width: 100%;
}

.movie_menu .hot_item {
  font-size: 15px;
  color: #666;
  width: 80px;
  text-align: center;
  margin: 0 12px;
  font-weight: 700;
  padding-bottom: 10px;
;
}


.movie_menu .hot_item.router-link-active {
  color: #ef4238;
  border-bottom: 2px #ef4238 solid;
}


</style>